<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>h5阻止滑动</title>
	</head>
	<body>
	</body>
</html>
<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!--360 browser -->
    <meta name="renderer" content="webkit">
    <meta name="author" content="wos">
    <!-- Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="images/i/app.png">
    <!--Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="images/i/app.png">
    <!--Win8 or 10 -->
    <meta name="msapplication-TileImage" content="images/i/app.png">
    <meta name="msapplication-TileColor" content="#e1652f">

    <link rel="icon" type="image/png" href="images/i/favicon.png">
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="css/public.css">

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="assets/js/jquery.min.js"></script>
    <!--<![endif]-->
    <!--[if lte IE 8 ]>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
    <![endif]-->
    <script src="assets/js/amazeui.min.js"></script>
    <script src="js/public.js"></script>
</head>
<body>

<header class="am-topbar am-topbar-fixed-top wos-header">
    <div class="am-container">
        <h1 class="am-topbar-brand">
            <a href="https://liuhaotian1122.github.io/my-pages/"><img src="images/logo.png" alt=""></a>
        </h1>

        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-warning am-show-sm-only"
                data-am-collapse="{target: '#collapse-head'}">
            <span class="am-sr-only">导航切换</span>
            <span class="am-icon-bars"></span>
        </button>

        <div class="am-collapse am-topbar-collapse" id="collapse-head">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li class="am-active"><a href="https://liuhaotian1122.github.io/my-pages/">首页</a></li>
                <li><a href="boke.html">博客</a></li>
                <li class="am-dropdown" data-am-dropdown>
                    <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                        小事 <span class="am-icon-caret-down"></span>
                    </a>
                    <ul class="am-dropdown-content">
                        <li class="am-dropdown-header">最近有些忙呀~</li>
						<li><a href="https://liuhaotian1122.gitee.io/haotians-personal-station/">返回旧版</a></li>
                        <li><a href="http://tool.mkblog.cn/relax/" style="color: red;">
						<div id="panel"><?xml version="1.0" encoding="UTF-8"?><svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#f8e71c" stroke="#333" stroke-width="2" stroke-linejoin="bevel"/><path d="M31 31C31 31 29 35 24 35C19 35 17 31 17 31" stroke="#333" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel"/><path d="M31 18V22" stroke="#333" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel"/><path d="M17 18V22" stroke="#333" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel"/></svg>
						点击放松一下</a></li>
                    </ul>
                </li>
                <li><a href="game.html">游戏</a></li>
                <li><a href="最近更新.html">更新</a></li>
            </ul>
            <div class="am-topbar-right">
                <a href="https://www.lanzouw.com/b02oefvsf"><button class="am-btn am-btn-danger am-topbar-btn am-btn-sm"><span class="am-icon-user"></span>下载文件</button></a>
            </div>
        </div>
    </div>
</header>
				<audio autoplay="autoplay" loop=""><source src="music/星茶会.mp3"></audio>
<div class="am-g am-container">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-8">
        <div class="newstitles">
            <h2>h5阻止左右滑动</h2>
            <img src="Temp-images/face3.jpg" class="face">
            <span>技术博客</span>
            时间：2021/11/11   <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <span id="busuanzi_container_site_pv">阅读<span id="busuanzi_value_site_pv"></span>次</span>
        </div>
        <a href="#"><img src="Temp-images/ad2.png" class="am-img-responsive" width="100%"/></a>

        <div class="contents">
            <p dir="ltr"><span style="color: rgb(88, 88, 88); font-family: arial, &#39;microsoft yahei&#39;, 宋体; line-height: 28px; text-align: justify; font-size: 16px; background-color: rgb(255, 255, 255);">&nbsp; &nbsp; &nbsp; &nbsp;
			1.避免点击300ms延迟
			<br>
			css：
			<br>
			  <p><b>*{ touch-action: manipulation;}</b></p> 
			</span></p><p dir="ltr"><span style="color: rgb(88, 88, 88); font-family: arial, &#39;microsoft yahei&#39;, 宋体; line-height: 28px; text-align: justify; font-size: 16px; background-color: rgb(255, 255, 255);">&nbsp; &nbsp; &nbsp; &nbsp;
	2.解决方法:
	
	搜索到一篇帖子https://www.jianshu.com/p/8ea7b555a3dd?utm_campaign，教会了我比较横移距离与垂直移动距离的大小，哪个大就是往哪个方向移动啊。妙哉！豁然开朗!
	<textarea>
		var startX,startY;
		document.addEventListener("touchstart",function(e){
		    startX = e.targetTouches[0].pageX;
		    startY = e.targetTouches[0].pageY;
		});
		 
		document.addEventListener("touchmove",function(e){
		 
		    var moveX = e.targetTouches[0].pageX;
		    var moveY = e.targetTouches[0].pageY;
		    
		    if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
		        e.preventDefault();
		    }
		},{passive:false});</textarea>
			</span></strong></p><p dir="ltr" style="text-align: center;"><span style="color: rgb(88, 88, 88); font-family: arial, &#39;microsoft yahei&#39;, 宋体; line-height: 28px; text-align: justify; font-size: 16px; background-color: rgb(255, 255, 255);">
		3.放大招了，还有终极一法。
		<br>
		<textarea><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"></textarea>
		<br>
		content内三条属性的意思分别是，页面宽度等于设备宽度，初始页面宽度等于1倍设备宽度，并且不可改变。
		<br>
		有的时候如果页面内部的某些元素超出了设备宽度之外，也会导致可以移动，这这属于css布局的问题，和js无关。
		    
		
		
		
		</div>
    </div>
    </div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" ></div> 
<script type="text/javascript"> 
(function(){ 
var appid = 'cyvK89Rsj'; 
var conf = 'prod_bc31c38976f759ecd9e3a1ed2ad07de6'; 
var width = window.innerWidth || document.documentElement.clientWidth; 
if (width < 1000) {
var head = document.getElementsByTagName('head')[0]||document.head||document.documentElement;
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf-8';
script.id = 'changyan_mobile_js';
script.src = 'https://cy-cdn.kuaizhan.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf;
head.appendChild(script);
} else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://cy-cdn.kuaizhan.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>


<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
    <a href="#top" title="回到顶部">
        <span class="am-gotop-title">回到顶部</span>
        <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
</div>

<footer>
                <h6 class="right copy-right"><a href="https://www.happynewyear.life/?k=2ii2kl">Copyright</a> &copy; <a href="https://liuhaotian1122.github.io/my-pages/" target="_blank" title="2022 浩天的个人站"><script>
                    let currentYear = new Date().getFullYear();
                    document.write(currentYear);
</script> 浩天的个人站</a></h6>
</footer>
</body>

</html>
